// 显示加载状态
function showLoading() {
  $("#loading").css("display", "flex");
}

// 隐藏加载状态
function hideLoading() {
  $("#loading").css("display", "none");
}

function load() {
  showLoading(); // 请求开始前显示加载状态
  var list = $("#list").empty();
  $.get("/api/v1/data")
    .then(function (data, xhr) {
      if (data.code !== 200) {
        alert(data.msg);
        return;
      }
      data.data.forEach(function (item) {
        list.append(renderItem(item));
      });
    })
    .catch(function (e) {
      alert(e.message);
    })
    .always(function () {
      hideLoading(); // 请求完成后隐藏加载状态
    });
}

function renderItem(item) {
  var el = $('<div class="item">');
  var left = $('<div class="item-left">');
  var stateContainer = $('<div class="state-container"></div>');
  var state = $('<div class="state"></div>');
  if (item.alive) {
    el.addClass("alive");
    state.attr("title", "在线, 点击刷新状态");
  } else {
    el.addClass("dead");
    state.attr("title", "离线, 点击刷新状态");
  }
  state.click(function () {
    showLoading(); // 请求开始前显示加载状态
    $.post("/api/v1/data/refresh", {
      ip: item.ip,
      port: item.port,
    })
      .then(function () {
        load();
      })
      .catch(function (e) {
        alert(e.message);
      })
      .always(function () {
        hideLoading(); // 请求完成后隐藏加载状态
      });
  });
  stateContainer.append(state);

  // 处理成 ms
  var delayText = "";
  var delayState = 0;
  var delay;
  if (item.delay === -1) {
    delayText = "-";
    delay = "无法访问";
  } else {
    delay = item.delay * 1000;
    if (delay < 1) {
      delayText = "<1ms";
      delayState = 1;
    } else if (delay < 1000) {
      delayText = Math.ceil(delay) + "ms";
      if (delay < 10) {
        delayState = 2;
      } else {
        delayState = 3;
      }
    } else {
      delayText = Math.ceil(delay) / 1000 + "s";
      delayState = 4;
    }
  }

  stateContainer.append(
    $('<div class="delay">')
      .text(delayText)
      .addClass("delay-state--" + delayState)
      .attr("title", delay + "ms")
  );

  left.append(stateContainer);

  left.append(
    $('<div class="address">')
      .append($('<span class="ip">').text(item.ip))
      .append($("<span>:</span>"))
      .append($('<span class="port">').text(item.port))
  );
  left.append($('<div class="name">').text(item.name));

  var rm = $('<button class="btn-remove">移除</button>');
  rm.click(function () {
    if (confirm("确认移除？")) {
      showLoading(); // 请求开始前显示加载状态
      $.ajax({
        url: "/api/v1/data",
        type: "DELETE",
        data: {
          ip: item.ip,
          port: item.port,
        },
        success: function () {
          load();
        },
        error: function (e) {
          alert("移除失败: " + e.message);
        },
      }).always(function () {
        hideLoading(); // 请求完成后隐藏加载状态
      });
    }
  });
  el.append(left);

  var right = $('<div class="item-right">');
  right.append(
    $('<div class="timestamp" title="状态更新时间">').text(item.timestamp)
  );
  right.append(rm);
  el.append(right);
  return el;
}

$("#btn-add").click(function () {
  var name = $("#name").val();
  var ip = $("#ip").val();
  var port = $("#port").val();
  showLoading(); // 请求开始前显示加载状态
  $.post("/api/v1/data", {
    name: name,
    ip: ip,
    port: port,
  })
    .then(function () {
      // if ($('#add-more').is('checked')) {
      // } else {
      //     load()
      // }
      alert("添加成功");
    })
    .catch(function (e) {
      alert("添加失败:" + e.message);
    })
    .always(function () {
      hideLoading(); // 请求完成后隐藏加载状态
    });
});

load();

var dialog = $("#dialog");
$("#btn-show-dialog").click(function () {
  dialog.get(0).showModal();
});

$("#btn-close").click(function () {
  dialog.get(0).close();
  load();
});

$("#btn-refresh").click(function () {
  showLoading(); // 请求开始前显示加载状态
  $.post("/api/v1/data/refresh_all")
    .then(function () {
      load();
    })
    .catch(function (e) {
      alert(e.message);
    })
    .always(function () {
      hideLoading(); // 请求完成后隐藏加载状态
    });
});

// 初始化列表视图
const list = $("#list");
// 从 localStorage 中获取用户最后选择的视图模式，默认是列表视图
const lastViewMode = localStorage.getItem("viewMode") || "list-view";
list.addClass(lastViewMode);

// 切换视图的函数
function toggleView() {
  if (list.hasClass("list-view")) {
    list.removeClass("list-view").addClass("grid-view");
    // 存储当前视图模式到 localStorage
    localStorage.setItem("viewMode", "grid-view");
  } else {
    list.removeClass("grid-view").addClass("list-view");
    // 存储当前视图模式到 localStorage
    localStorage.setItem("viewMode", "list-view");
  }
}

// 绑定切换按钮的点击事件
$("#toggle-view").click(toggleView);
